<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Computed {
        constructor(source) {
          if (typeof source === 'function') {
            this.getter = source
          } else if (typeof source === 'object') {
            this.getter = source.get
            this.setter = source.set
          }
        }
        // 当访问.value属性时, 会调用getter方法, 访问器
        get value() {
          return this.getter()
        }
        set value(newValue) {
          if (this.setter) {
            this.setter(newValue)
          }
          return true
        }
      }

      const heroImage = new Computed(function () {
        return function (value) {
          return value
        }
      })
      console.log(heroImage)
      console.log(heroImage.value)

      console.log(heroImage.value('hello'))

      new Computed({
        get: function () {},
        set: function (value) {}
      })
    </script>
  </body>
</html>
